<!--  -->
<template>
  <div class="edit">
    <el-dialog v-model="editFlag" title="修改信息">
      <el-form :model="editUserFrom" label-width="120px">
        <el-form-item label="账号：">
          <el-input v-model="editUserFrom.username" />
        </el-form-item>
        <el-form-item label="姓名：">
          <el-input v-model="editUserFrom.nickName" />
        </el-form-item>
        <el-form-item label="邮箱：">
          <el-input v-model="editUserFrom.email" />
        </el-form-item>
        <el-form-item label="密码：">
          <el-input v-model="editUserFrom.password" type="password" />
        </el-form-item>
        <el-form-item label="备注：">
          <el-input v-model="editUserFrom.note" type="textarea" />
        </el-form-item>
        <el-form-item label="是否启用：">
          <el-radio-group v-model="editUserFrom.status">
            <el-radio :label="1"> 是</el-radio>
            <el-radio :label="0">否 </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="cancelEdit" size="large">取消</el-button>
        <el-button type="primary" @click="openEdit" size="large"
          >确定</el-button
        >
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ElMessage, ElMessageBox } from "element-plus";
import { ref, watch, nextTick } from "vue";
import * as http from "@/request";
let editUserFrom = ref({} as IUserListDataItem);
const props = withDefaults(
  defineProps<{
    editFlag: boolean;
    userInfoForm: IUserListDataItem;
    id: number;
  }>(),
  {
    editFlag: false,
  }
);

watch(
  () => props.editFlag,
  () => {
    editUserFrom.value = { ...props.userInfoForm };
  }
);
const emit = defineEmits<{
  (event: "openEditDialog"): void;
  (event: "closeEditDialog"): void;
  (event: "unitPage"): void;
}>();
const cancelEdit = () => {
  emit("closeEditDialog");
};
// 再次打开修改用户信息确认窗口
const openEdit = () => {
  ElMessageBox.confirm("此操作将修改当前用户信息, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true,
  })
    .then(async () => {
      let res = await http.adminUpdate(props.id, editUserFrom.value);
      if (res.code === 200) {
        emit("unitPage");
        await nextTick();
        emit("closeEditDialog");
        // 重新获取当前用户信息
        ElMessage({
          message: res.message,
          type: "success",
        });
      }
    })
    .catch(() => {});
};
</script>
<style lang="scss" scoped></style>
